// 轮播图
.lunbo {
    height: 500px;
    margin-top: 25px;

    >.swiper {
        width: 1200px;
        height: 500px;
        --swiper-theme-color: #ff6600;
        /* 设置Swiper风格 */
        --swiper-navigation-color: #00ff33;
        /* 单独设置按钮颜色 */
        --swiper-navigation-size: 20px;

        /* 设置按钮大小 */
        img {
            width: 1200px;
            height: 500px;
        }

        .my-bullet-active {
            background: red;
            opacity: 1;
        }
    }
}

// 系列产品
.product {
    height: 180px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    // background-color: aqua;

    >.product-tw {
        width: 130px;
        height: 180px;
        // background-color: chartreuse;

        >.product-tu {
            width: 130px;
            height: 140px;
            // background-color: coral;

            >img {
                width: 130px;
                height: 140px;
            }
        }

        >.product-wz {
            width: 130px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
    }
}

// Find N 系列
.N-series {
    height: 400px;
    margin-top: 25px;

    // background-color: aqua;
    >.Ns-top {
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        // background-color: brown;
    }

    >.Ns-bottom {
        height: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // background-color: chartreuse;
        >.bt-left,
        img {
            width: 450px;
            height: 320px;
        }

        >.bt-left {
            transition: all .5s;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 3px 3px 3px 3px gainsboro;
            }
        }

        >.bt-right {
            width: 730px;
            height: 320px;
            display: flex;
            justify-content: space-evenly;

            // background-color: gold;
            >.btr-tw {
                width: 210px;
                height: 320px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                background-color: white;

                >.btrtu,
                img {
                    width: 150px;
                    height: 150px;
                    // background-color: crimson;
                }

                >.btrname {
                    width: 150px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    // background-color: darksalmon;
                }

                >.btnprice {
                    width: 155px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    color: red;

                    // background-color: darkturquoise;
                    >p {
                        font-size: 10px;

                        >span {
                            font-size: 16px;
                        }
                    }

                }
            }

            >.btr-tw {
                transition: all .5s;

                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 3px 3px 3px 3px gainsboro;
                }
            }

        }
    }
}

// Find X 系列
.X-series {
    margin-top: 25px;
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    // background-color: aqua;

    >.Xs-top {
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        // background-color: burlywood;
    }

    >.Xs-middle {
        height: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: brown;

        >.md-left,
        img {
            width: 450px;
            height: 320px;
        }

        >.md-left {
            transition: all .5s;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 3px 3px 3px 3px gainsboro;
            }
        }

        >.md-right {
            width: 730px;
            height: 320px;
            display: flex;
            justify-content: space-evenly;
            // background-color: darkmagenta;

            >.mdr-tw {
                width: 210px;
                height: 320px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                background-color: white;

                >.mdrtu,
                img {
                    width: 150px;
                    height: 150px;
                }

                >.mdrname {
                    width: 150px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    // background-color: deeppink;

                }

                >.mdnprice {
                    width: 155px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    color: red;

                    // background-color: darkturquoise;
                    >p {
                        font-size: 10px;

                        >span {
                            font-size: 16px;
                        }
                    }
                }
            }

            >.mdr-tw {
                transition: all .5s;

                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 3px 3px 3px 3px gainsboro;
                }
            }
        }
    }

    >.Xs-bottom {
        height: 320px;
        display: flex;
        justify-content: space-between;

        // background-color: deeppink;
        >.btr-tw {
            width: 210px;
            height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background-color: white;

            >.btrtu,
            img {
                width: 150px;
                height: 150px;
                // background-color: crimson;
            }

            >.btrname {
                width: 150px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                // background-color: darksalmon;
            }

            >.btnprice {
                width: 155px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: red;

                // background-color: darkturquoise;
                >p {
                    font-size: 10px;

                    >span {
                        font-size: 16px;
                    }
                }

            }
        }

        >.btr-tw {
            transition: all .5s;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 3px 3px 3px 3px gainsboro;
            }
        }
    }
}

// Reno 系列
.Rn-series {
    margin-top: 25px;
    height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    // background-color: aqua;
    >.Rn-top {
        height: 50px;
        font-size: 25px;
        line-height: 50px;
        // background-color: burlywood;
    }

    >.Rn-middle {
        height: 350px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // background-color: brown;
        >.md-left,
        img {
            width: 450px;
            height: 320px;
        }

        >.md-left {
            transition: all .5s;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 3px 3px 3px 3px gainsboro;
            }
        }

        >.md-right {
            width: 730px;
            height: 320px;
            display: flex;
            justify-content: space-evenly;
            // background-color: darkmagenta;

            >.mdr-tw {
                width: 210px;
                height: 320px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                background-color: white;

                >.mdrtu,
                img {
                    width: 150px;
                    height: 150px;
                }

                >.mdrname {
                    min-width: 150px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    // background-color: deeppink;

                }

                >.mdnprice {
                    width: 155px;
                    height: 45px;
                    text-align: center;
                    line-height: 45px;
                    color: red;

                    // background-color: darkturquoise;
                    >p {
                        font-size: 10px;

                        >span {
                            font-size: 16px;
                        }
                    }
                }
            }

            >.mdr-tw {
                transition: all .5s;

                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 3px 3px 3px 3px gainsboro;
                }
            }
        }
    }

    >.Rn-bottom {
        height: 320px;
        display: flex;
        justify-content: flex-start;

        // background-color: deeppink;
        >.btr-tw {
            width: 210px;
            height: 320px;
            margin-right: 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background-color: white;

            >.btrtu,
            img {
                width: 150px;
                height: 150px;
                // background-color: crimson;
            }

            >.btrname {
                min-width: 150px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                // background-color: darksalmon;
            }

            >.btnprice {
                width: 155px;
                height: 45px;
                text-align: center;
                line-height: 45px;
                color: red;

                // background-color: darkturquoise;
                >p {
                    font-size: 10px;

                    >span {
                        font-size: 16px;
                    }
                }

            }
        }

        >.btr-tw {
            transition: all .5s;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 3px 3px 3px 3px gainsboro;
            }
        }
    }
}